import React from 'react'
import { Tabs } from 'antd'
import TabBarTabsNode from 'rc-tabs/lib/TabBarTabsNode';

const CustomTabs = ({
	children,
	...props
}) => {
	const prefixCls = "x-tabs"
	return (
		<Tabs
			{...props}
			prefixCls={prefixCls}
			renderTabBar={props => {
				const {
					panels
				} = props
				
				const newProps = {
					...props,
					panels: panels.map(panel => {
							const {
								tab
							} = panel.props
							if (typeof tab === 'string') {
								return React.cloneElement(panel, {
									...panel.props,
									tab: <em>{tab}</em>
								})
							}
							return panel
						})
				}
				return (
					<div className={`${prefixCls}-nav`}><TabBarTabsNode {...newProps} /></div>
				)
			}}
	    	>
	      {children}
	    </Tabs>
	)
}
CustomTabs.TabPane = Tabs.TabPane

export default CustomTabs